<template>
    <div>
        <!-- NowPlaying page is a children of Film -->
        <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-immediate-check="check" infinite-scroll-distance="10">
            <li v-for="data in dataList" :key="data.filmId" @click="handleClick(data.filmId)">
                <img :src="data.poster" />
                <h3>购票</h3>
                <h4>
                    {{ data.name }}
                    <span>{{ data.item.name }}</span>
                </h4>
                <p v-if="data.grade">
                    观众评分
                    <span>{{ data.grade }}</span>
                </p>
                <p>主演：{{ data.actors | actorsFilter }}</p>
                <p>{{ data.nation }} | {{ data.runtime }}分钟</p>
            </li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios';
import Vue from 'vue';
import { Indicator } from 'mint-ui';

Vue.filter('actorsFilter', (data) => {
    if (data) {
        let newActors = data.map((item) => item.name).join(' ');
        const len = newActors.length;
        if (len > 17) {
            newActors = newActors.substring(0, 17) + '...';
        }
        return newActors;
    } else {
        return '暂无主演';
    }
});

export default {
    // 服务端触发函数
    // 当前页面刷新服务端调用，当前端url跳转时会在前端浏览器调用
    asyncData() {
        // return返回promise对象，保证asyncData有.then()方法
        return axios({
            url: 'https://m.maizuo.com/gateway?cityId=370100&pageNum=1&pageSize=10&type=1&k=914983',
            method: 'GET',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"159668407331181462568961","bc":"370100"}',
                'X-Host': 'mall.film-ticket.film.list'
            }
        }).then((res) => {
            console.log('注意：服务端打印～～');
            // return返回结果，保证.then()方法中有res参数对象
            return {
                dataList: res.data.data.films,
                total: res.data.data.total
            };
        });
    },
    data() {
        return {
            // dataList: [],
            loading: false,
            check: false, // 第一次加载时不触发loadMore()方法
            pageNum: 1 // 分页
            // total: 0 // 记录总条数
        };
    },
    // mounted() {
    //     // mintui 加载中，可以跨组件关闭
    //     Indicator.open({
    //         text: '加载中...',
    //         spinnerType: 'fading-circle'
    //     });
    //     // axios.get('https://m.maizuo.com/gateway?cityId=370100&pageNum=1&pageSize=10&type=1&k=914983').then(res => {
    //     //     console.log(res.data);
    //     // });
    //     axios({
    //         url: 'https://m.maizuo.com/gateway?cityId=370100&pageNum=1&pageSize=10&type=1&k=914983',
    //         method: 'GET',
    //         headers: {
    //             'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"159668407331181462568961","bc":"370100"}',
    //             'X-Host': 'mall.film-ticket.film.list'
    //         }
    //     }).then((res) => {
    //         this.dataList = res.data.data.films;
    //         this.total = res.data.data.total;
    //         // mintui 加载中，关闭
    //         Indicator.close();
    //     });
    // },
    methods: {
        handleClick(id) {
            this.$router.push({
                path: '/detail',
                query: { FilmId: id }
            });
        },
        loadMore() {
            this.loading = true; // 禁用无限滚动条触发事件
            this.pageNum++;

            // 防止最大页数后重复请求接口
            if (this.dataList.length >= this.total) {
                return;
            }
            Indicator.open({
                text: '加载中...',
                spinnerType: 'fading-circle'
            });

            axios({
                url: `https://m.maizuo.com/gateway?cityId=370100&pageNum=${this.pageNum}&pageSize=10&type=1&k=914983`,
                method: 'GET',
                headers: {
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"159668407331181462568961","bc":"370100"}',
                    'X-Host': 'mall.film-ticket.film.list'
                }
            }).then((res) => {
                this.dataList = [...this.dataList, ...res.data.data.films];
                this.loading = false; //  打开无限滚动条触发事件
                Indicator.close();
            });
        }
    }
};
</script>

<style lang="scss" scoped>
div {
    margin-left: 10px;
    margin-bottom: 40px;
    ul {
        padding: 5px;
        li {
            list-style: none;
            width: 100%;
            height: 120px;
            border-bottom: 1px solid #eeeeee;
            padding-top: 10px;
            cursor: pointer;
            h4 {
                margin: 0px;
                padding-top: 8px;
                font-weight: normal;
                span {
                    background: #dddddd;
                    font-size: 12px;
                    color: #ffffff;
                }
            }
            img {
                width: 66px;
                height: 93px;
                float: left;
                margin-right: 10px;
            }
            h3 {
                width: 50px;
                height: 20px;
                position: absolute;
                right: 12px;
                margin-top: 30px;
                font-size: 13px;
                font-weight: normal;
                color: #ff5f16;
                border: 1px solid #ff5f16;
                text-align: center;
            }
            p {
                font-size: 13px;
                color: #797d82;
                margin: 0px;
                span {
                    color: lightsalmon;
                }
            }
        }
    }
}
</style>
